<page-header title="{{'edit-pop-combo' | translate}}">
  <ng-template #breadcrumb>
    <nz-breadcrumb>
      <nz-breadcrumb-item><a [routerLink]="['/pop/list']">{{'pop-list' | translate}}</a></nz-breadcrumb-item>
      <nz-breadcrumb-item>{{'add-pop-combo' | translate}}</nz-breadcrumb-item>
    </nz-breadcrumb>
  </ng-template>
  <ng-template #action><button nz-button (click)="back()"style="float: right"><i class="anticon anticon-rollback" style="font-size: 14px"></i>{{'goback' | translate}}</button></ng-template>
</page-header>
<nz-spin [nzSpinning]="loading">
  <nz-card nzTitle="{{'base_info' | translate}}" [nzExtra]="extraTemplate">
    <form nz-form>
      <nz-form-item>
        <nz-form-label nzSpan="2" required>{{'sap' | translate}}</nz-form-label>
        <nz-form-control nzSpan="3">
          <input nz-input name="sap" [(ngModel)]="pop.sap" disabled  nzTitle="套餐SAP名称，不填写则默认xxx&xxx显示，xxx为套餐内每个道具的SAP名称" nzPlacement="topCenter" nz-tooltip>
        </nz-form-control>
        <nz-form-label nzSpan="2" >{{'sku_number' | translate}}</nz-form-label>
        <nz-form-control nzSpan="3">
          <input nz-input name="sku" [(ngModel)]="pop.sku" nzTitle="套餐SKU物料号，默认xxx&xxx显示，xxx为生成套餐时包含每个物料的SKU描述" nzPlacement="topCenter" nz-tooltip>
        </nz-form-control>
        <!--<nz-form-label nzSpan="2" required>{{'description' | translate}}</nz-form-label>-->
        <!--<nz-form-control nzSpan="3">-->
          <!--<input nz-input name="description" [(ngModel)]="pop.description" nzTitle="套餐中文名称，不填写则默认xxx&xxx显示，xxx为套餐内每个道具的中文名称" nzPlacement="topCenter" nz-tooltip>-->
        <!--</nz-form-control>-->
        <nz-form-label nzSpan="2" nzRequired>{{'brand' | translate}}</nz-form-label>
        <nz-form-control nzSpan="3">
          <nz-select style="" [(ngModel)]="pop.brand" name="brand" nzAllowClear  [nzPlaceHolder]="pop.brand"  disabled>
            <nz-option [nzLabel]="brand.text" [nzValue]="brand.value" *ngFor="let brand of brands"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="2" >EXW</nz-form-label>
        <nz-form-control nzSpan="3">
          <input nz-input name="EXW" [(ngModel)]="pop.exw" disabled>
        </nz-form-control>

        <nz-form-label nzSpan="2" >CIF</nz-form-label>
        <nz-form-control nzSpan="3">
          <input nz-input name="CIF" [(ngModel)]="pop.cif" disabled>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="2" >{{'cm_size' | translate}}</nz-form-label>
        <nz-form-control nzSpan="3">
          <input nz-input name="cm" [(ngModel)]="pop.cm" nzTitle="例如 : 45*18*20" nzPlacement="topCenter" nz-tooltip>
        </nz-form-control>
        <!--<nz-form-label nzSpan="2" >{{'price_unit' | translate}}</nz-form-label>-->
        <!--<nz-form-control nzSpan="1">-->
          <!--<nz-select style="" [(ngModel)]="pop.priceUnit" name="priceUnit" nzAllowClear >-->
            <!--<nz-option [nzLabel]="priceUnit.text" [nzValue]="priceUnit.value" *ngFor="let priceUnit of priceUnits"></nz-option>-->
          <!--</nz-select>-->
        <!--</nz-form-control>-->
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="2">{{'img' | translate}}</nz-form-label>
        <nz-form-control nzSpan="3">
          <nz-upload class="avatar-uploader"
                     [nzAction]="uploadUrl"
                     nzName="avatar"
                     nzListType="picture-card"
                     [nzShowUploadList]="false"
                     [nzBeforeUpload]="beforeUpload"
                     (nzChange)="handleChange($event)">
            <ng-container *ngIf="!pop.img">
              <i class="anticon anticon-plus"></i>
              <div class="ant-upload-text">Upload</div>
            </ng-container>
            <img *ngIf="pop.img" [src]="picUrl" class="avatar">
          </nz-upload>
        </nz-form-control>
      </nz-form-item>
        <nz-form-label nzSpan="2">{{'is_on_sale' | translate}}</nz-form-label>
        <nz-form-control>
          <nz-switch name="salestatus" [(ngModel)]="salestatus" nzCheckedChildren="{{'on_sale' | translate}}" nzUnCheckedChildren="{{'off_sale' | translate}}"></nz-switch>
        </nz-form-control>
    </form>
  </nz-card>
  <ng-template #extraTemplate>
    <button (click)="reset(0)" nz-button nzType="primary">{{'reset' | translate}}</button>
  </ng-template>
</nz-spin>


<nz-card nzTitle="{{'combo_info' | translate}}" [nzExtra]="extraTemplate1" nzXs="24" nzSm="24" nzMd="24">

  <!--<form nz-form>-->
    <!--<nz-form-item>-->
      <!--<nz-form-control nzXs="24" nzSm="24" nzMd="24">-->
        <nz-alert style="margin-bottom: 8px;" nzType="info" nzMessage="可以直接粘贴Excel数据: 选中要复制的单元格范围,然后在输入框中粘贴即可" nzShowIcon></nz-alert>
        <nz-table #basicTable
                  nzSize="small"
                  nzNoResult="点击添加可以增加更多表格"
                  nzBordered
                  [nzScroll]="{x:'1300px'}"
                  class="sku-multiple-table"
                  cellpadding="0"
                  cellspacing="0">
          <thead>
          <tr>
            <th nzLeft="0px"></th>
            <th class="wd92" nzWidth="80px"
                style="min-width: 80px; max-width: 80px;text-align: center;height: 30px"
                *ngFor="let attr of attrList" >
              {{attr}}
              <span *ngIf="attr === 'SAP'" class="text-error">*</span>
              <span *ngIf="attr === 'SAP'" nz-tooltip nzTitle="套餐内明细道具的SAP物料号，可以组成套餐总SAP物料号" [nzOverlayStyle]="{'font-size.px': 12}">
                  <a ><i class="anticon anticon-up"></i></a>
              </span>
              <span *ngIf="attr === 'SKU'" nz-tooltip nzTitle="套餐内明细道具的SKU描述，可以组成套餐总SKU描述" [nzOverlayStyle]="{'font-size.px': 12}">
                  <a><i class="anticon anticon-up"></i></a>
              </span>
              <span *ngIf="attr === '名称'" nz-tooltip nzTitle="套餐内明细道具的中文名称，可以组成套餐名称" [nzOverlayStyle]="{'font-size.px': 12}">
                   <a><i class="anticon anticon-up"></i></a>
              </span>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let datarow of dataTable; let row = index">
            <!--<td nzLeft="0px" style="text-align: center; width: 50px;">{{row + 1}}</td>-->
            <td nzLeft="0px" style="text-align: center; width: 50px;" *ngIf="datarow">
              <a (click)="minCount(row)"><i  class="anticon anticon-minus-circle-o" style="font-size: 20px"></i></a>
              <input nz-input nzSize="small" style="width: 18px;" type="text"
                     [(ngModel)]="datarow[13]" >
              <a (click)="addCount(row)"><i class="anticon anticon-plus-circle-o" style="font-size: 20px"></i></a>
            </td>
            <td *ngFor="let col of attrList; let stdi = index" style="text-align: center; width: 50px">
              <div *ngIf="stdi == 0" style="display: inline-block;">
                <nz-upload
                  class = "goods-pic"
                  [nzAction]="uploadUrl"
                  nzListType="picture-card"
                  [nzShowUploadList]="false"
                  [nzBeforeUpload]="beforeUpload"
                  (nzChange)="handleChangeForDetail($event,datarow)">
                  <i *ngIf="!dataTable[row][stdi]" class="anticon anticon-plus"></i>
                  <img *ngIf="dataTable[row][stdi]" [src]="imgSuffix + dataTable[row][stdi]" class="avatar">
                </nz-upload>
              </div>
              <input nz-input nzSize="small" *ngIf="stdi == 1" style="width: 80px;" type="text"
                     [(ngModel)]="datarow[stdi]" (paste)="pasteExcel(row, stdi, $event)">
              <input nz-input nzSize="small" *ngIf="stdi >1 &&stdi <= 4 " style="width: 80px;" type="text"
                     [(ngModel)]="datarow[stdi]" (paste)="pasteExcel(row, stdi, $event)">
              <nz-input-number *ngIf="stdi>= 5 && stdi<=6" style="width: 80px;" (paste)="pasteExcel(row, stdi, $event)"
                     [(ngModel)]="datarow[stdi]" [nzPrecision]="0" [nzSize]="'small'" [nzMin]="0" [nzStep]="1">
              </nz-input-number>
              <input nz-input nzSize="small" *ngIf="stdi >6 " style="width: 80px;" type="text"
                     [(ngModel)]="datarow[stdi]" (paste)="pasteExcel(row, stdi, $event)">
            </td>
          </tr>
          </tbody>
        </nz-table>
        <button nz-button type="button" (click)="append()" *ngIf="dataTable.length <= 9" [nzType]="'dashed'" class="ant-btn__block mt-sm">
          <i class="anticon anticon-plus"></i>
          <span>{{'add'|translate}}</span>
        </button>
      <!--</nz-form-control>-->
    <!--</nz-form-item>-->
  <!--</form>-->
</nz-card>
<ng-template #extraTemplate1>
  <button (click)="reset(1)" nz-button nzType="primary">{{'reset' | translate}}</button>
</ng-template>
<footer-toolbar errorCollect>
  <button nz-button type="primary" nzType="primary"  [nzLoading]="loading" (click)="save()">{{'save' | translate}}</button>
</footer-toolbar>


